/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 收益广告
 *  */
import React, { useEffect, useCallback } from "react";
import { Row, Col, Button, Form, Typography, Checkbox, message } from "antd";
import { connect, useDispatch } from "dva";
import ServiceQrcode from "../components/ServiceQrcode";
import styles from "../style.less";

const { Title, Text } = Typography;
const FormItem = Form.Item;

const checkBoxMap = [
  {
    value: "ad_single_place",
    label: "下单页",
  },
  {
    value: "ad_express_index",
    label: "查件页",
  },
  {
    value: "ad_express_detail",
    label: "物流详情页",
  },
  {
    value: "ad_order_detail",
    label: "订单详情页",
  },
  {
    value: "ad_print_order",
    label: "提交订单完成页",
  },
  {
    value: "ad_order_finish",
    label: "订单打印完成页",
  },
];

const Revenue = ({ goBack, form, loading }) => {
  const { getFieldDecorator, validateFields, isFieldsTouched, setFieldsValue } = form;
  const dispatch = useDispatch();

  const getCheckedList = useCallback(
    () => {
      dispatch({
        type: "wxSettings/getRevenueAdvShowPosition",
      }).then(res => {
        setFieldsValue({
          checkBox: res,
        });
      });
    },
    [dispatch, setFieldsValue]
  );

  const onSubmit = useCallback(
    () => {
      const isTouched = isFieldsTouched();
      if (!isTouched) {
        message.warning("请修改后再提交");
        return;
      }
      validateFields((err, val) => {
        if (err) return;
        const { checkBox = [] } = val;
        const payload = {};

        checkBoxMap.forEach(({ value }) => {
          if (checkBox.includes(value)) {
            payload[value] = 1;
          } else {
            payload[value] = 0;
          }
        });

        dispatch({
          type: "wxSettings/setRevenueAdvShowPosition",
          payload,
        }).then(() => {
          getCheckedList();
        });
      });
    },
    [validateFields, dispatch, isFieldsTouched, getCheckedList]
  );

  useEffect(
    () => {
      getCheckedList();
    },
    [getCheckedList]
  );

  return (
    <div className={styles.customizedMenu}>
      <Row style={{ width: "100%" }}>
        <Col span={6}>
          <ServiceQrcode />
        </Col>
        <Col span={18}>
          <Typography>
            <Title level={2}>开启官方收益广告，客户每次点击您都会有收入</Title>
            <Text type="secondary">请选择开启收益广告的页面（暂支持公众号页面）</Text>
          </Typography>
          <Form style={{ marginTop: 20 }}>
            <FormItem>
              {getFieldDecorator("checkBox")(
                <Checkbox.Group style={{ width: "100%" }}>
                  <Row gutter={[30, 30]}>
                    {checkBoxMap.map(val => (
                      <Col key={val.value}>
                        <Checkbox value={val.value}>{val.label}</Checkbox>
                      </Col>
                    ))}
                  </Row>
                </Checkbox.Group>
              )}
            </FormItem>
          </Form>
        </Col>
      </Row>
      <Row type="flex" justify="end" className={styles.customizedMenu__bottom}>
        <Col style={{ marginTop: 10 }}>
          <Row type="flex" justify="space-between" gutter={[20, 0]}>
            <Col>
              <Button onClick={onSubmit} type="primary" loading={loading}>
                确认
              </Button>
            </Col>
            <Col>
              <Button type="primary" onClick={goBack}>
                返回
              </Button>
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  );
};

export default Form.create()(
  connect(({ loading }) => ({
    loading: loading.effects["wxSettings/setRevenueAdvShowPosition"],
  }))(Revenue)
);
